<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
    <style>
        #box {
            width: 200px;
            height: 200px;
            border: 1px solid red;

        }

        .bg {
            background-color: black;
        }
    </style>
</head>
<body>
<!--
        vue中实现元素显示和隐藏的指令
        v-if   boolean   true  false   添加和删除节点实现元素的显示和隐藏
        v-show   boolean   true  显示  false 隐藏     style="display: none;

        显示和隐藏频率较高时    v-show

        v-bind  实现数据绑定    动态操作标签中的属性
        简化写法
           :src="02.jpg"  :class="bg"
-->

<div id="app">
    <h1>{{info}}</h1>
    <!--    <div id="box" v-show="false"></div>-->
    <!--    <div id="box" v-if="bln"  v-bind:class="bg"></div>-->

    <!--    v-bind 简化写法-->
    <div id="box" v-if="bln" :class="bg"></div>

    <!--    <div  v-if="bln"  class=""></div>-->

    <button @click="change()">显示和隐藏矩形区域</button>
    <button @click="addColor()">添加背景色</button>


</div>

<script type="text/javascript">
    const vm = new Vue({
        el: '#app',
        data: {
            info: '元素的显示和隐藏',
            bln: true,
            bg: ''
        },
        methods: {
            change() {
                this.bln = !this.bln
            },
            addColor() {
                this.bg = 'bg'
            }
        }
    })
</script>
</body>
</html>
